<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
	<meta charset="UTF-8">
	<title>task_1_7</title>
	<link rel="stylesheet" href="./css/task7.css">
</head>
<body>
	<div class="wrap">
		<header>
			<div class="logo">
				<img src="./images/task_1_7_1_03.png" alt="logo">
				新世界
			</div>
			<div class="login">
				<img src="./images/task_1_7_1_06.png" alt="logo">
				<a href="#">登录</a>
				<div class="login-bottom"></div>
			 </div>
			<div class="nav-list">
				<li><a href="#">首页</a></li>
				<li><a href="https://badiu.com">最新活动</a></li>
				<li><a href="https://badiu.com">最新活动</a></li>
				<li><a href="https://badiu.com">最新活动</a></li>
				<li><a href="https://badiu.com">最新活动</a></li>
				<div class="nav-list-bottom"></div>
			</div>
		</header>
		<div class="first-part">
			<div class="mask"></div>
			<div class="box">
				<h1>Time of new life</h1>
				<p>新时代 , 年轻的人们让我们一起 <br>体验新生活 , 享受新生活</p>
				<a href="#">开始体验</a> 
			</div>	
		</div>
		<div class="second-part">
			<div class="sec-intro">
				<img src="./images/task_1_7_1_13.png" alt="figure">				
				<div class="detail">
					丰富多彩的公益活动, 发<br />挥新世界的主人公意识
				</div>
			</div>
			<div class="sec-intro">
				<img src="./images/task_1_7_1_15.png" alt="figure">
				<div class="detail">
					丰富多彩的公益活动, 发<br />挥新世界的主人公意识
				</div>
			</div>
			<div class="sec-intro">
				<img src="./images/task_1_7_1_17.png" alt="figure">
				<div class="detail">
					丰富多彩的公益活动, 发<br />挥新世界的主人公意识
				</div>
			</div>
			<div class="sec-intro">
				<img src="./images/task_1_7_1_20.png" alt="figure">
				<div class="detail">
					丰富多彩的公益活动, 发<br />挥新世界的主人公意识
				</div>
			</div>			
		</div>
		<div class="third-part">
			<img src="./images/task_1_7_1_27.png" alt="figure">	
			<div class="detail">关于新世界，你不知道的还有什么？</div>		
		</div>
		<div class="fourth-part">
			<div class="mask"></div>
			<div class="box">
				<p class="para-1">
					寻找新世界城市活动信息
				</p>
				<span></span>
				<p class="para-2">
					每个城市都有不同的活动信息, 请自主查询您所需要了解的城市
				</p>
				<form action="">
					<select name="country" id="country">
						<option value="" selected>国家</option>
						<option value="中国">中国</option>
						<option value="中国">美国</option>
					</select>

					<select name="province" id="province">
						<option value="" selected>省份</option>
						<option value="中国">广东</option>
						<option value="中国">湖南</option>
					</select>

					<select name="city" id="city">
						<option value="" selected>城市</option>
						<option value="中国">上海</option>
						<option value="中国">北京</option>
					</select>
					<input class="submit" type="submit" value="搜索" />
				</form>
			</div>
		</div>
		<div class="fifth-part">
			<div class="box">
				<div class="figure">
					<img src="./images/task_1_7_1_33.png" alt="figure">
					<div class="figcaption">
						<p class="act-place">北京活动</p>
						<p class="act-title">新社区大联盟</p>
					</div>
				</div>
				<div class="figure">
					<div class="figcaption">
						<p class="act-place act-em">上海活动</p>
						<p class="act-title">夜上海新景观探索</p>
					</div>
					<img src="./images/task_1_7_1_41.png" alt="figure">	
				</div>
				<div class="figure">
					<img src="./images/task_1_7_1_38.png" alt="figure">			
					<div class="figcaption">
						<p class="act-place">深圳活动</p>
						<p class="act-title">全新海岸线观点站</p>
					</div>
				</div>
				<div class="figure">
					<img src="./images/task_1_7_1_35.png" alt="figure">
					<div class="figcaption">
						<p class="act-place">香港活动</p>
						<p class="act-title">奢侈消费大派送</p>
					</div>
				</div>
			</div>
		</div>
		<div class="sixth-part">
			<div class="page-left">
				<div class="box">
					<p class="para-1">新世界</p>
					<p class="para-2">TIME</p>
					<p class="para-3">@新世界-北京</p>
					<p class="para-4">2016.04.01</p>
				</div>
			</div>
			<div class="page-right">
				<div class="box">
					<p class="para-1">新世界/ <span>01</span></p>
					<p class="para-2">新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界</p>
					<a href="#">更多详情</a>
					<ul class="slider-list">
						<li></li>
						<li></li>
						<li></li>
					</ul>
				</div>
			</div>
		</div>
		<div class="seventh-part">
			<div class="left">			
				<p class="para">新时代 <br>关于爱生活的我们</p>					
				 <span></span>
				 <div class="detail"><a href="#">查看更多</a></div>					
			</div>
			<div class="center">
				<p class="para">新时代 <br>关于爱生活的我们</p>					
				 <span></span>					
				 <div class="detail"><a href="#">查看更多</a></div>									
			</div>
			<div class="right">
				<div class="r-triangle"></div>
			</div>
		</div>
		<div class="eighth-part">
			<div class="eighth-para">
				<h2>成为我们的志愿者</h2>
				<span></span>					
				<p >新世界的大家庭需要每一个热爱生活的人加入，如果你够年轻，有梦想，有激情<br>那就不要犹豫，快来加入我们，成为改变所有人生活的人</p>
			</div>
			
			<div class="box">
				<ul class="terms">
					<li>
						<h3>新世纪志愿者协议</h3>
						<p class="para-2">新世纪志愿者协议新世纪志愿者协议新世纪志愿者协议新世纪志愿者协议新世纪志愿者协议新世纪志愿者协议新世纪志愿者协议新世纪志愿者协议新世纪志愿者协议新世纪志愿者协议</p>
					</li>					
					<li>
						<h3>新世纪志愿者协议</h3>						
						<p class="para-2">新世纪志愿者协议新世纪志愿者协议新世纪志愿者协议新世纪志愿者协议新世纪志愿者协议新世纪志愿者协议新世纪志愿者协议新世纪志愿者协议新世纪志愿者协议新世纪志愿者协议</p>
					</li>									
					<li>
						<h3>新世纪志愿者协议</h3>						
						<p class="para-2">新世纪志愿者协议新世纪志愿者协议新世纪志愿者协议新世纪志愿者协议新世纪志愿者协议新世纪志愿者协议新世纪志愿者协议新世纪志愿者协议新世纪志愿者协议新世纪志愿者协议</p>
					</li>					
				</ul>	
				<form action="">
					<input type="text" placeholder="姓名："/>
					<input type="text" placeholder="年龄："/>
					<input type="text" placeholder="联系方式："/>
					<input type="text" placeholder="联系地址："/>
					<textarea name="dream-life" id="" cols="30" rows="10" placeholder="请简单描述梦想的生活："></textarea>
					<input type="submit" value="提交申请"/>
				</form>
			</div>
		</div>
		<div class="ninth-part">
			<p>联系我们</p>
			<p>为了更好的获取我们最新的产品咨询, 您可以留下您的电子邮箱快速订阅我们的产品咨询<br />也可以通过以下任何方式关注我们动态</p>
			
			<form action="#" method="post">
				<input type="email" name="email" id="email" placeholder="someone@email.com"/>
				<input class="submit" type="submit" value="提交"/>
			</form>			
			<a href="#"><img src="./images/task_1_7_1_53.png"/></a>
			<a href="#"><img src="./images/task_1_7_1_55.png"/></a>
			<a href="#"><img src="./images/task_1_7_1_57.png"/></a>
			<a href="#"><img src="./images/task_1_7_1_59.png"/></a>		
		</div>
		<footer>
			<span>&copy;2017新世界</span>
			<a href="#top">Back to top</a>
		</footer>		
	</div>	
</body>
</html>